<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div class="navBar">
        <div class="titleLeft">
            <a href="file:///E:/HTML/my_html/home.html" class="titleLink">开课吧首页</a>
            <a href="#" class="titleLink">创业微学院</a>
            <a href="#" class="titleLink">摄影微学院</a>
            <a href="#" class="titleLink">微聚</a>
            <a href="#" class="titleLink">论坛</a>
        </div>
        <div class="titleRight">
            <a href="#" class="titleLink">登录</a>
            <a href="file:///E:/HTML/my_html/register.html" class="titleLink">注册</a>
            <a href="#" class="titleLink">播放记录</a>
            <a href="#" class="titleLink">APP下载</a>
        </div>
    </div>

    <div class="navBar2">
        <div class="titleLeft">
            <a href="#" class="titleLink2">
                <span style="font-size: 30px;">摄影</span>
                <span style="font-size: medium;">·开课吧</span>
            </a>
            <a href="file:///E:/HTML/my_html/personal.html" class="titleLink2">
                个人中心
            </a>
            <a href="file:///E:/HTML/my_html/video.html" class="titleLink2">
                视频播放
            </a>
        </div>
        <div class="titleRight">
            <img src="C:\Users\lorshine\Pictures\Screenshots\屏幕截图 2024-09-18 211743.png" width="50" height="50">
            <img src="C:\Users\lorshine\Pictures\Screenshots\屏幕截图 2024-12-15 232056.png" width="50" height="50">
            <img src="C:\Users\lorshine\Pictures\Screenshots\屏幕截图 2024-12-15 232057.png" width="50" height="50">
            <img src="C:\Users\lorshine\Pictures\Screenshots\屏幕截图 2024-12-15 232058.png" width="50" height="50">
        </div>
    </div>

    <div class="video-container" style="background-color: aquamarine;">
        <div class="video-top">
            <div class="video-breadcrumb">
                摄影首页-摄影器材-手机
            </div>
            <div class="video-title">
                正在播放：手机摄影构图技巧大全
            </div>
            <div class="video-player">
                <video id="mainVideo" src="E:\EV\video1.mp4" autoplay muted controls></video>
            </div>

            <div class="video-controls">
                <div class="video-actions">
                    <button class="action-btn">
                        <i class="icon-like">👍</i> 点赞
                    </button>
                    <button class="action-btn">
                        <i class="icon-collect">⭐</i> 收藏
                    </button>
                    <button class="action-btn">
                        <i class="icon-share">🔗</i> 转发
                    </button>
                </div>
                <div class="video-views">
                    2.5万次播放
                </div>
            </div>
        </div>

        <div class="video-bottom">

            <div class="video-bottom-left">

                <div class="section episode-section">
                    <div class="section-header">
                        选集：共12集
                    </div>
                    <div class="episode-grid">
                        <img src="C:\Users\lorshine\Pictures\Camera Roll\21605333_175741758085_2.jpg" alt="第1集缩略图"
                            class="episode-thumb">
                        <img src="C:\Users\lorshine\Pictures\Camera Roll\OIP-C.webp" alt="第2集缩略图" class="episode-thumb">
                        <img src="C:\Users\lorshine\Pictures\Camera Roll\OIP-C.webp" alt="第3集缩略图" class="episode-thumb">
                        <img src="C:\Users\lorshine\Pictures\Camera Roll\21605333_175741758085_2.jpg" alt="第4集缩略图"
                            class="episode-thumb">
                    </div>
                </div>

                <div class="section related-videos">
                    <div class="section-header">
                        相关视频
                    </div>
                    <div class="related-grid">
                        <img src="C:\Users\lorshine\Pictures\Camera Roll\OIP-C.webp" alt="相关视频1" class="related-thumb">
                        <img src="C:\Users\lorshine\Pictures\Camera Roll\1684144257394498.png" alt="相关视频2"
                            class="related-thumb">
                        <img src="C:\Users\lorshine\Pictures\Camera Roll\30395639_143251621032_2.jpg" alt="相关视频3"
                            class="related-thumb">
                        <img src="C:\Users\lorshine\Pictures\Camera Roll\1689317571293547.png" alt="相关视频4"
                            class="related-thumb">
                        <img src="C:\Users\lorshine\Pictures\Camera Roll\1684144257394498.png" alt="相关视频5"
                            class="related-thumb">
                        <img src="C:\Users\lorshine\Pictures\Camera Roll\OIP-C.webp" alt="相关视频6" class="related-thumb">
                        <img src="C:\Users\lorshine\Pictures\Camera Roll\1689317571293547.png" alt="相关视频7"
                            class="related-thumb">
                        <img src="C:\Users\lorshine\Pictures\Camera Roll\30395639_143251621032_2.jpg" alt="相关视频8"
                            class="related-thumb">
                    </div>
                </div>

                <!-- 评论区域 -->
                <div class="section comments-section">
                    <div class="section-header">
                        评论
                    </div>
                    <div class="comment-input-area">
                        <textarea placeholder="写下你的评论..." class="comment-input"></textarea>
                        <button class="post-comment">发布评论</button>
                    </div>
                </div>
            </div>

            <!-- 右侧部分 -->
            <div class="video-bottom-right">
                <div class="right-section video-info">
                    <div class="right-section-header">
                        视频信息
                    </div>
                    <div class="info-content">
                        本视频详细介绍了手机摄影的各种构图技巧，包括三分法、引导线、对称构图等实用方法。适合手机摄影初学者快速掌握拍摄技巧，提升照片质量。通过实际案例讲解，让你轻松理解各种构图原理和应用场景。
                    </div>
                </div>

                <!-- 精选活动 -->
                <div class="right-section featured-activities">
                    <div class="right-section-header">
                        精选活动
                    </div>
                    <div class="activities-grid">
                        <img src="C:\Users\lorshine\Pictures\Screenshots\屏幕截图 2024-09-21 103150.png" alt="活动1"
                            class="activity-thumb">
                        <img src="C:\Users\lorshine\Pictures\Screenshots\屏幕截图 2025-06-29 125714.png" alt="活动2"
                            class="activity-thumb">
                        <img src="C:\Users\lorshine\Pictures\Screenshots\屏幕截图 2025-01-01 110858.png" alt="活动3"
                            class="activity-thumb">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="navBar">
        <p style=" text-align: center; font-size: 15px; font-weight: bold;background-color: #1990e5cb">LZZ@开课吧 版权所有</p>
    </div>


</body>

<style>
    @import url(style2.css);
</style>

</html>